(function () {
  const oContainer = document.querySelector('.carousel')
  const oImgBox = oContainer.querySelector('.imgs')
  const oPrev = oContainer.querySelector('.prev')
  const oNext = oContainer.querySelector('.next')
  const aImgs = oContainer.querySelectorAll('.imgs-wrap')
  const moveTimes = aImgs.length - 3 // 能翻页的次数
  let currTime = 0


  oPrev.onclick = oNext.onclick = function () {
    if (this == oPrev) {
      if (currTime > 0) {
        currTime--
        changeImg()
      }
    } else {
      if (currTime < moveTimes) {
        currTime++
        changeImg()
      }
    }
    console.log(currTime);
  }

  function changeImg() {
    oImgBox.style.left = -((aImgs[0].offsetWidth + 30) * currTime) + 'px'
    changeBtn()
  }

  function changeBtn(){
    if(currTime<=0){
      oPrev.classList.add('invalid')
    }else{
      oPrev.classList.remove('invalid')
    }

    if(currTime>=moveTimes){
      oNext.classList.add('invalid')
    }else{
      oNext.classList.remove('invalid')
    }

  }
  let timer
  function go(){
    timer = setInterval(()=>{
      if(currTime==moveTimes){
        currTime=-1
      }
      oNext.onclick()
    },2000);
  }
  go()
  oContainer.onmouseover = function(){
    clearInterval(timer)
  }
  oContainer.onmouseout = function(){
    go()
  }
  
})();
(function () {
  let articleWrap = document.querySelector('#blog .article-wrap');
  fetchData();
  function fetchData() {
    axios.get('/getBlogs', {
      params: {
        pageNum: 1,
        pageSize: 6
      }
    }).then(response => {
      let blogs = response.data.data;
      blogs.forEach(blog => {
        articleWrap.insertAdjacentHTML('beforeend', `
          <article>
            <a class="img-box" href="blog-single.html?id=${blog.id}" style="background-image:url(${imgUrl(blog.image)});"></a>
            <div class="content-wrap">
              <a href="blog-single.html?id=${blog.id}">
                <h3>${blog.title}</h3>
              </a>
              <p>${blog.abstract} </p>
              <div class="flex justify-content-between align-items-center">
                <span class="date"><i class="iconfont qm-clock"></i>${blog.createTime.substring(0, 10)}</span>
                <a class="more" href="blog-single.html?id=${blog.id}">查看更多<i class="iconfont qm-arrow-right"></i></a>
              </div>
            </div>
          </article>
        `);
      });
    });
  };
})();


// 返回顶部按钮
// (function () {
//   let topBtn = document.querySelector('.top-btn')
//   const html = document.documentElement
//   document.addEventListener('scroll', function () {
//     topBtn.hidden = html.scrollTop < (html.clientHeight) * 2
//   })
//   topBtn.addEventListener('click', function () {
//     html.scrollTo(
//       {
//         top: 0,
//         behavior: 'smooth'
//       }
//     )
//   })

// })()